<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>商城</title>
    <!-- =====  CSS  ===== -->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div th:replace="~{template::topbar}"></div>
<div class="container">
    <div class="row ">
        <!-- =====  BANNER STRAT  ===== -->
        <div class="col-sm-12">
            <div class="breadcrumb ptb_20">
                <h1>商城</h1>
                <ul>
                    <li><a href="/index">首页</a></li>
                    <li class="active">商城</li>
                </ul>
            </div>
        </div>
        <!-- =====  BREADCRUMB END===== -->
        <div style="margin-left: 150px" class="col-sm-8 col-lg-9 mtb_20">
            <div class="row">
                <div class="product-layout product-grid col-md-4 col-xs-6 " th:each="item : ${list}">
                    <div class="item">
                        <div class="product-thumb clearfix mb_30">
                            <div class="image product-imageblock"> <a th:onclick="|javascript:cart('${item.getWatch_id()}')|"> <img data-name="product_image" th:src="'/watch/'+${item.getImg_href()}" alt="iPod Classic" th:title="${item.getTitle()}" class="img-responsive" /> <img th:src="'/watch/1'+${item.getImg_href()}" alt="iPod Classic" th:title="${item.getTitle()}" class="img-responsive" /> </a>
                                <div class="button-group text-center">
                                    <div class="wishlist"><a><span>wishlist</span></a></div>
                                    <div class="quickview"><a><span>Quick View</span></a></div>
                                    <div class="compare"><a><span>Compare</span></a></div>
                                    <div class="add-to-cart"><a><span>Add to cart</span></a></div>
                                </div>
                            </div>
                            <div class="caption product-detail text-center">
                                <h6 data-name="product_name" class="product-name mt_20"><a th:text="${item.getWatch_name()}"></a></h6>
                                <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-1x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i><i class="fa fa-star fa-stack-x"></i></span> </div>
                                <span class="price"><span class="amount"><span class="currencySymbol">￥</span><span th:text="${item.getPrice()}"></span></span>
                    </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function cart(id) {
       if('[[${session.isLogin}]]'==''){
           alert("请先登录！！！");
       }else {

           $.ajax({
               url:"/addToCart/"+id,
               type:"post",
               success:function (data) {
                   $("#cart-total").html(data);
                   $("#cart-dropdown").load(location.href+" #cart-dropdown>*","");
                   alert("添加到购物车成功！");
               }
           });
       }
    }
</script>
<script src="js/jQuery_v3.1.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery-ui.js"></script>
</body>
</html>